<template>
  <view class="my-page">
    <!-- 用户角色切换区域 -->
    <view class="role-switch-section">
      <text class="section-title">用户角色</text>
      <picker 
        :value="currentRoleIndex" 
        :range="roleOptions" 
        range-key="name"
        @change="onRoleChange"
      >
        <view class="role-picker">
          <text>{{ currentRole.name }}</text>
          <text class="arrow">▼</text>
        </view>
      </picker>
    </view>

    <!-- 用户信息展示区域 -->
    <view class="user-info-section">
      <text class="section-title">用户信息</text>
      <view class="info-item">
        <text class="label">姓名：</text>
        <text class="value">{{ userInfo.name || '加载中...' }}</text>
      </view>
      <view class="info-item">
        <text class="label">角色：</text>
        <text class="value">{{ userInfo.roleName || '加载中...' }}</text>
      </view>
      <view class="info-item">
        <text class="label">权限：</text>
        <text class="value">{{ userInfo.permissions || '加载中...' }}</text>
      </view>
    </view>

    <!-- 数据展示区域 -->
    <view class="data-section">
      <text class="section-title">相关数据</text>
      <view v-if="loading" class="loading">
        <text>数据加载中...</text>
      </view>
      <view v-else class="data-list">
        <view 
          v-for="(item, index) in dataList" 
          :key="index" 
          class="data-item"
        >
          <text class="data-title">{{ item.title }}</text>
          <text class="data-content">{{ item.content }}</text>
        </view>
      </view>
    </view>

    <!-- 刷新按钮 -->
    <view class="refresh-section">
      <button 
        class="refresh-btn" 
        @click="refreshData"
        :disabled="loading"
      >
        {{ loading ? '刷新中...' : '手动刷新数据' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前角色索引
      currentRoleIndex: 0,
      // 角色选项
      roleOptions: [
        { id: 1, name: '普通用户', code: 'user' },
        { id: 2, name: '管理员', code: 'admin' },
        { id: 3, name: '超级管理员', code: 'super_admin' }
      ],
      // 用户信息
      userInfo: {
        name: '',
        roleName: '',
        permissions: ''
      },
      // 数据列表
      dataList: [],
      // 加载状态
      loading: false
    }
  },
  
  computed: {
    // 当前角色
    currentRole() {
      return this.roleOptions[this.currentRoleIndex] || this.roleOptions[0]
    }
  },
  
  onLoad() {
    // 页面加载时初始化数据
    this.initData()
  },
  
  methods: {
    // 初始化数据
    async initData() {
      await this.loadUserInfo()
      await this.loadData()
    },
    
    // 角色切换事件
    async onRoleChange(e) {
      const newIndex = e.detail.value
      if (newIndex !== this.currentRoleIndex) {
        this.currentRoleIndex = newIndex
        const newRole = this.roleOptions[newIndex]
        
        // 切换角色
        await this.switchRole(newRole)
        
        // 刷新页面数据
        await this.refreshAllData()
      }
    },
    
    // 切换用户角色
    async switchRole(role) {
      try {
        this.loading = true
        
        // 调用角色切换API
        const response = await uni.request({
          url: '/api/user/switchRole',
          method: 'POST',
          data: {
            roleId: role.id,
            roleCode: role.code
          }
        })
        
        if (response.data.code === 200) {
          uni.showToast({
            title: `已切换到${role.name}`,
            icon: 'success'
          })
          
          // 更新本地存储的角色信息
          uni.setStorageSync('currentRole', role)
        } else {
          throw new Error(response.data.message || '角色切换失败')
        }
      } catch (error) {
        console.error('角色切换失败:', error)
        uni.showToast({
          title: '角色切换失败',
          icon: 'error'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 加载用户信息
    async loadUserInfo() {
      try {
        const response = await uni.request({
          url: '/api/user/info',
          method: 'GET'
        })
        
        if (response.data.code === 200) {
          this.userInfo = response.data.data
        }
      } catch (error) {
        console.error('加载用户信息失败:', error)
      }
    },
    
    // 加载数据
    async loadData() {
      try {
        this.loading = true
        
        const response = await uni.request({
          url: '/api/data/list',
          method: 'GET',
          data: {
            roleCode: this.currentRole.code
          }
        })
        
        if (response.data.code === 200) {
          this.dataList = response.data.data || []
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        uni.showToast({
          title: '数据加载失败',
          icon: 'error'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 刷新所有数据
    async refreshAllData() {
      try {
        this.loading = true
        
        // 并行加载用户信息和数据
        await Promise.all([
          this.loadUserInfo(),
          this.loadData()
        ])
        
        uni.showToast({
          title: '数据刷新成功',
          icon: 'success'
        })
      } catch (error) {
        console.error('数据刷新失败:', error)
        uni.showToast({
          title: '数据刷新失败',
          icon: 'error'
        })
      }
    },
    
    // 手动刷新数据
    async refreshData() {
      await this.refreshAllData()
    }
  }
}
</script><style 
scoped>
.my-page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

/* 角色切换区域样式 */
.role-switch-section {
  background: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.role-picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  border: 1rpx solid #e9ecef;
}

.arrow {
  color: #666;
  font-size: 24rpx;
}

/* 用户信息区域样式 */
.user-info-section {
  background: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.info-item {
  display: flex;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  width: 120rpx;
  color: #666;
  font-size: 28rpx;
}

.value {
  flex: 1;
  color: #333;
  font-size: 28rpx;
}

/* 数据展示区域样式 */
.data-section {
  background: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.loading {
  text-align: center;
  padding: 40rpx;
  color: #666;
}

.data-list {
  margin-top: 20rpx;
}

.data-item {
  padding: 20rpx;
  margin-bottom: 15rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  border-left: 4rpx solid #007aff;
}

.data-item:last-child {
  margin-bottom: 0;
}

.data-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.data-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

/* 刷新按钮区域样式 */
.refresh-section {
  background: white;
  padding: 30rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.refresh-btn {
  width: 100%;
  height: 80rpx;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.refresh-btn:disabled {
  background: #ccc;
  color: #999;
}

.refresh-btn:not(:disabled):active {
  background: #0056b3;
}
</style>